<template>
  <div class="context">
    <div class="box">
      <div>
        <div class="box1"></div>
        账号管理
      </div>
      <div class="btn">
        <el-button
          text
          @click="dialogFormVisible = true"
          style="background-color: orange; border: 0px"
          type="primary"
          >新增
        </el-button>
        <!-- 新增页面 -->
        <el-dialog v-model="dialogFormVisible" title="新增账号">
          <el-form :model="ruleForm">
            <el-form-item label="账户账号" prop="admin">
              <el-input
                v-model="ruleForm.admin"
                autocomplete="off"
                placeholder="请输入账户账号"
              />
            </el-form-item>
            <el-form-item label="登录密码" prop="password">
              <el-input
                v-model="ruleForm.password"
                type="password"
                placeholder="请输入账户登录密码"
              />
            </el-form-item>
            <el-form-item label="账号类型">
              <el-radio-group v-model="ruleForm.resource">
                <el-radio label="集团账号" />
                <el-radio label="项目账号" />
              </el-radio-group>
            </el-form-item>
            <el-form-item label="关联员工" prop="renyuan">
              <el-input
                v-model="ruleForm.renyuan"
                class="w-50 m-2"
                placeholder="请输入关联员工姓名"
                :suffix-icon="Search"
              />
            </el-form-item>
            <el-form-item label="联系手机" prop="phone">
              <el-input
                v-model.number="ruleForm.phone"
                placeholder="请输入员工联系手机"
              />
            </el-form-item>

            <hr />
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button type="primary" @click="addAdmin">保存</el-button>
              <el-button @click="dialogFormVisible = false"> 取消 </el-button>
            </span>
          </template>
        </el-dialog>
      </div>
    </div>
    <div class="main">
      <div class="top"><h1>账号列表</h1></div>

      <div>
        搜索<el-input
          v-model="find.phone"
          placeholder="请输入账户账号,关联员工,联系手机"
        />
        状态
        <el-select
          
          v-model="find.status"
          style="width: 180px"
          
          placeholder="---请选择---"
        >
          <el-select-option v-for="item in list" :key="item" :label="item" :value="item">---请选择---</el-select-option>
          <!-- <a-select-option value="open">启用</a-select-option>
          <a-select-option value="close">禁用</a-select-option> -->
        </el-select>
        <el-button type="primary" @click="searchFn">搜索</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <div class="buttom">
      <el-table
        :data="tableData.slice((page-1)*limit,page*limit)"
        style="width: 100%; align: center"
        border="true"
      >
        <el-table-column
          align="center"
          prop="id"
          label="序号"
          width="60"
          type="index"
        >
          <template #default="scope">
            <span>{{ (page - 1) * limit + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="admin"
          label="账户账号"
          width="150"
        />
        <el-table-column
          align="center"
          prop="renyuan"
          label="关联员工"
          width="180"
        />
        <el-table-column
          align="center"
          prop="phone"
          label="联系手机"
          width="150"
        />
        <el-table-column
          align="center"
          prop="status"
          label="状态"
          width="100"
        />
        <el-table-column align="center" label="操作">
          <template #default="scope">
            <el-button @click="showReset">密码重置</el-button>
            <el-button @click="editShowFn(scope.row.admin, scope.row.id)"
              >编辑</el-button
            >

            <el-button>禁用</el-button>
            <el-button>授权</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- //分页 -->
      <el-pagination
        small
        background
        
        v-model:current-page="currentpage"
        @current-change="changePage"
        layout="prev, pager, next"
        :total="tableData.length/4*10"
        style="float: right"
      />
    </div>
    <div class="reset" v-show="showTable">
      <div class="reset-top">
        <h1>提示</h1>
        <el-icon @click="showIcon"><CloseBold /></el-icon>
      </div>
      <div class="reset-center">
        <el-icon style="font-size: 25px; margin-right: 10px; color: aquamarine"
          ><Warning /></el-icon
        >确认要重置密码为123456么？
      </div>
      <div class="reset-bottom">
        <el-button type="warning" @click="changePassword">确定</el-button>
        <el-button @click="showCancel">取消</el-button>
      </div>
    </div>
  </div>
  <Edit
    :id="editid"
    :admin="editAdmin"
    v-show="isShowEdit"
    @updatesuccess="successFn"
    @hide="hideFn"
  ></Edit>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import service from "../../../utils/service";

import { CloseBold, Warning, Search } from "@element-plus/icons-vue";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import Edit from "./Edit.vue";


// import {isvalidUsername,isvalidPass,isvalidRenyuan,isvalidPhone} from "./validate"

interface IAdmin {
  id: number;
  admin: string;
  renyuan: string;
  phone: number;
  status: string;
}

const tableData = reactive<IAdmin[]>([]);

//渲染页面
const getlist = () => {
  service({
    url: "accountlistu",
    method: "get",
  }).then((res) => {
    // if(res.data.code==="200"){
    tableData.length = 0;
    tableData.push(...res.data);

   
    // }
  });
};
// getlist();
//分页
const total = ref();

const limit = ref(4)
const page = ref(1)
const currentpage = ref()

const changePage = (value: number) => {
  page.value = value
  currentpage.value = value
  service({
    url:"accountlistu",
    method:"get",
    params:{
      _page:currentpage.value,
      _limit:4
    }
  }).then(res=>{
    
  })
};

// const count = ref()
// const getdata = ()=>{
//   service({
//     url:"accountlist",
//     method:"get"
  
//   }).then(res=>{
//     count.value = res.data.length
//     tableData.length = 0;
//     tableData.push(...res.data)
//   })
// }

const showTable = ref(false);

const showReset = () => {
  showTable.value = true;
};
const showCancel = () => {
  showTable.value = false;
};
const showIcon = () => {
  showTable.value = false;
};
const changePassword = () => {
  showTable.value = false;
  ElMessage({
    message: "重置成功！",
    type: "success",
  });
};
const dialogFormVisible = ref(false);

interface IForm {
  admin: string;
  password: string;
  renyuan: string;
  status:string;
  phone: number;
}
//当前人员的数据 新增
const ruleForm = reactive<IForm>({
  admin: "",
  password: "",
  renyuan: "",
  phone:  0,
  status:""
});

//增加
const addAdmin = () => {
  service({
    url: "accountlistu",
    method: "post",
    data: ruleForm,
  }).then((res) => {
    dialogFormVisible.value = false;
    ElMessage({
      message: "添加成功",
      type: "success",
    });
    getlist();
  });
};

//修改
const isShowEdit = ref(false);
const editAdmin = ref(""); //修改的 管理员姓名

const hideFn = () => {
  isShowEdit.value = false;
};
const editid = ref();
const editShowFn = (admin: string, id: number) => {
  editAdmin.value = admin;
  isShowEdit.value = true;
  editid.value = id;
};

const ruleFormRef = ref<FormInstance>();

const successFn = () => getlist(); //编辑成功后重新发送请求,获取最新数据

//搜索

const find = reactive<{
  admin?:string;
  renyuan?:string;
  phone?:number;
  status?:string
}>({})

const list = reactive(["---请选择---","启用","禁用"])
const searchFn = () => {
  service({
    url: "accountlistu",
    method: "get",
    params: find,
  }).then((res) => {
    // (value.value = ""), (tableData.length = 0), tableData.push(...res.data);
    tableData.length = 0;
    tableData.push(...res.data);
    console.log(res.data);
    find.admin = null;
    find.renyuan = null;
    find.phone = null;
    find.status = null;
    total.value = res.data.length//获取搜索后的总数
    
  });
};
searchFn();
// const rules = reactive<FormRules>({
//   admin: [{required: true, validator: validUsername, trigger: 'blur' }],
//   password: [{required: true, validator:validatePass, trigger: 'blur' }],
//   renyuan: [{required: true, validator:validRenyuan, trigger: 'blur' }],
//   phone:[{required: true, validator: validPhone, trigger: "blur"}]
// })

// const validUsername = (rule:any, value:any, callback:any) => {
//       if (value === "") {
//         callback(new Error("请输入用户名"));
//       } else if (!isvalidUsername(value)) {
//         callback(
//           new Error(
//             "用户名要求数字、字母、下划线的组合 数字和字母必须存在 长度为4-15个字符"
//           )
//         );
//       }
//     };
// const validatePass = (rule:any, value:any, callback:any) => {
//       if (value === "") {
//         callback(new Error("请输入密码"));
//       } else if (!isvalidPass(value)) {
//         callback(
//           new Error("密码以字母开头 长度在8~18之间 只能包含字母、数字和下划线")
//         );
//       } else {

//         callback();
//       }
//     };
// const validRenyuan = (rule:any, value:any, callback:any) => {
//       if (value === "") {
//         callback(new Error("请输入员工姓名"));
//       } else if (!isvalidRenyuan(value)) {
//         callback(new Error("请填写正确的员工姓名"));
//       }
//     };
// const validPhone = (rule:any, value:any, callback:any) => {
//       if (value === "") {
//         callback(new Error("请输入手机号码"));
//       } else if (!isvalidPhone(value)) {
//         callback(new Error("请填写正确的手机号码"));
//       }
//     };



</script>
  
<style scoped>
.box {
  width: 100%;
  height: 50px;
  background-color: rgba(128, 128, 128, 0.09);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: gray;
}

.box .box1 {
  width: 5px;
  height: 15px;
  background-color: greenyellow;
  float: left;
  margin-right: 5px;
}
.main {
  margin-top: 15px;
  border-top: 1px solid rgba(128, 128, 128, 0.122);
}
.main .top {
  display: flex;
  align-items: center;
  height: 60px;
}
.main .top h1 {
  font-weight: 700;
}
.main .el-input {
  width: 270px;
  margin-left: 20px;
  margin-right: 20px;
}
.main .el-select {
  margin-left: 20px;
  margin-right: 20px;
}
.buttom {
  margin-top: 15px;
}
.buttom .el-table__body {
  text-align: center;
}
.buttom .el-table__body .el-table__row {
  height: 50px;
}
.reset {
  width: 500px;
  height: 170px;
  background-color: #fff;
  border: 0.5px solid gray;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -20%);
  z-index: 999;
  font-weight: 700;
}
.reset .reset-top {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
}
.reset .reset-center {
  position: absolute;
  left: 25%;
  top: 40%;
  font-size: 18px;
  display: flex;
  align-items: center;
}
.reset .reset-bottom {
  position: absolute;
  left: 350px;
  top: 125px;
}
</style>